<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="800px" ok-text="确认离职" cancel-text="取消"
    @ok="addFormSubmit" class="handleLeave_modal">
    <a-form layout="inline" :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-page-header title="离职人员">
        <span v-for="staff in leaveStaff" :key="staff.id" style="font-size: 18px;">
          {{ staff.name }} ,
        </span>
      </a-page-header>
      <a-page-header title="离职确认" style="padding-bottom: 0;">
        <a-form-item label="正式离职日期">
          <a-date-picker valueFormat="YYYY-MM-DD"
            v-decorator="['leaveDay', { rules: [{ required: true, message: '请选择日期' }] }]" />
        </a-form-item>
        <a-form-item label="薪资结算日期">
          <a-date-picker valueFormat="YYYY-MM-DD"
            v-decorator="['salaryDay', { rules: [{ required: true, message: '请选择日期' }] }]" />
        </a-form-item>
        <a-form-item label="离职类型">
          <a-select v-decorator="['leaveType', { rules: [{ required: true, message: '请选择纳税人性质!' }], initialValue: '' }]" style="width: 200px;">
            <a-select-option v-for="item in leaveList" :key="item.leaveType">
              {{ item.leaveTypeName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-page-header>
      <a-page-header title="停保确认">
        <a-form-item label="停缴月份">
          <a-month-picker valueFormat="YYYY-MM" v-decorator="['socialEndDay', { rules: [{ required: true, message: '请选择月份' }] }]">
            <template slot="monthCellContentRender" slot-scope="date">
              <div>{{ `${moment(date).format('M')}月` }}</div>
            </template>
          </a-month-picker>
        </a-form-item>
      </a-page-header>
    </a-form>
  </a-modal>
</template>

<script>
import { batchDimission,listEnterpriseStaffLeaveType } from "@/api/human/relationStaff"
import moment from 'moment'
export default {
  name: 'handleLeave',
  data() {
    return {
      visible: false,
      title: '办理离职',
      submitLoading: false,
      enterpriseId: '',

      leaveStaff: [],
      leaveList: [],
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, { name: 'events_form' });
  },
  computed: {

  },
  methods: {
    moment,
    async init(id, row) {
      this.visible = true;
      this.enterpriseId = id;
      this.leaveStaff = row;
      this.$nextTick(() => {
        this.events_form.resetFields();
      })
      this.getLeaveList();
    },
    async getLeaveList() {
      const { code, data } = await listEnterpriseStaffLeaveType();
      if (code === '1') {
        this.leaveList = data
      }
    },
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          let ids = [];
          if (this.enterpriseId) {
            values.enterpriseId = this.enterpriseId;
          }
          if (this.leaveStaff.length > 0) {
            this.leaveStaff.forEach(item => {
              ids.push(item.id)
            })
            values.ids = ids;
          }
          this.submitLoading = true;
          const { code } = await batchDimission(values);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.handleLeave_modal {
  .ant-form-item {
    width: 80%;
    margin-bottom: 10px;
  }
}
</style>